<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        点击次数{{num}}
        <button @click="num += 1">点击</button>
        <button @click="num = 1">重置</button>
        <button @click="num -= 1">取消</button>
        <div v-for="(user,index) in users" :key="index">
            <span>
              {{index}} --- {{user.name}} --- {{user.age}} --- {{user.price}} --- <input type="number" v-model:value="user.time">
            </span>
        </div>
        {{totolPrice}}
        <br>

        <counter></counter><br>
        <button-counter></button-counter>
    </div>
    <script>
        const person = {
            name: '张三',
            age: 12,
            language: ['java', 'js', 'css']
        }
        const {
            name,
            age,
            language
        } = person

        function say() {
            return 'wdnmd'
        }
        let info = `你好我是${name}，今年${age > 18 ? 18 : age}岁。我想说：${say()}`
        console.log(info)
        let print = obj => console.log(obj)
        print('surprise mother fucker')

        let sum = (a, b) => a + b
        console.log(sum(1, 3))
        let add = (a, b) => {
            c = a + b
            return c * a
        }
        console.log(add(2, 2))

        let arr = [1, 44, 2, 40, -99, 3]
        let result = arr.reduce((a, b) => {
            console.log('上次处理的值' + a)
            console.log('当前处理的值' + b)
            return a + b
        })
        console.log(result)
    </script>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        const buttonCounter = {
            template: `<button @click="count++">被点击了{{count}}次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        }

        Vue.component("counter", {
            template: `<button @click="count++">被点击了{{count}}次</button>`,
            data() {
                return {
                    count: 1
                }
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                num: 1,
                users: [{
                    name: 'zs',
                    age: 12,
                    price: 10.8,
                    time: 2
                }, {
                    name: 'ls',
                    age: 32,
                    price: 20.8,
                    time: 3
                }, {
                    name: 'ww',
                    age: 22,
                    price: 30.8,
                    time: 5
                }]
            },
            computed: {
                totolPrice() {
                    var totol = 0
                    this.users.forEach(element => {
                        totol += element.price * element.time
                    });
                    return totol
                }
            },
            watch: {
                num(newVal, oldVal) {
                    if (newVal < 1) {
                        alert('请输入正确的值')
                        this.num = 1
                    }
                }
            },
            components: {
                "button-counter": buttonCounter
            }
        })
    </script>
</body>

</html>